
<template>
  <div>
    <el-button @click="creatCarAll()" :disabled="btnDis">创建车</el-button>
    <el-button @click="moveCarAll()" :disabled="btnDis">移动车</el-button>
    <el-button @click="deleteCarAll()" :disabled="btnDis">清除全部车</el-button>
    <el-button @click="test()" :disabled="btnDis">测试</el-button>

    车数量 <el-input class="num" v-model="carNum" :disabled="btnDis"></el-input>

    毫秒 <el-input class="ms" v-model="ms" :disabled="btnDis"></el-input>
    <!-- <div class="send" @click="send()">send</div> -->
    <Player />
  </div>
</template>

<script>
import { mapState } from "vuex";
import Player from "@/components/player/player";
import { getMockDataByTime } from "@/api/connect";
export default {
  computed: {
    // 获取AirCity模块里的状态
    ...mapState("AirCity", ["AirCityApi", "AirCityPlayer"]),
    result() {
      if (this.fh.length > 0) {
        let res = this.fh.slice(0, this.carNum);
        res.forEach((item, index) => {
          item.testPoi = this.computPos(index);
        });
        console.log(res, 1240);
        return res;
      } else {
        return [];
      }
    },
  },
  data() {
    return {
      workerList: {
        addWorker: null,
        deleteWorker: null,
        updataWorker: null,
      },
      fh: null,
      endNum: 0,
      carNum: 0,
      btnDis: false,
      pos: [
        [22.524918167524, 113.93100],
        [22.524918199339, 113.93195],
        [22.524919241768, 113.93090],
        [22.524920381126, 113.93085],
        [22.524921233773, 113.93080],
        [22.524922154341, 113.93075],
        [22.524917670875, 113.93070],
        [22.524928210515, 113.93065],
        [22.524918086075, 113.93060],
        [22.524931110103, 113.93055],
        [22.524934167121, 113.93050],
        [22.524934084588, 113.93045],
        [22.524937013171, 113.93040],
        [22.524936139848, 113.93035],
        [22.5249337807, 113.93030],
        [22.524933865033, 113.93025],
        [22.524934996513, 113.93020],
        [22.524937162622, 113.93015],
        [22.524939165745, 113.93010],
        [22.524941553717, 113.93005],
        [22.524944954594, 113.93000],
        [22.524948768241, 113.92995],
        [22.524952470925, 113.92990],
        [22.524959593542, 113.92985],
        [22.524962817737, 113.92980],
        [22.524966741898, 113.92975],
        [22.524969433034, 113.92970],
        [22.524971418488, 113.92965],
        [22.524973681759, 113.92960],
        [22.524975834229, 113.92955],
        [22.524977895343, 113.92950],
        [22.524980145061, 113.92945],
        [22.524982701978, 113.92940],
        [22.524985795713, 113.92935],
        [22.524989564341, 113.92930],
        [22.524993972003, 113.92925],
        [22.524998770798, 113.92920],
        [22.525003726077, 113.92915],
        [22.525008620174, 113.92910],
      ],
      ms:300
    };
  },
  mounted() {
    this.get();
  },
  components: { Player },
  methods: {
    async get() {
      let { data } = await getMockDataByTime();
      // console.log(res);
      this.fh = data;

      // console.log(data,'data');
    },
    // 创建车对象
    async creatCar(item) {
      //此时可以调用接口了
      let { trackId: id, testPoi } = item;
      // console.log(location);
      let obj = {
        id,
        pakFilePath: HostConfig.Path + "/media/custom.pak",
        assetPath: "/Game/Common/Asset_Bank/Mesh/Car/BP_Car_JiuHuChe",
        location: testPoi[0],
        rotation: [0, 0, 0],
        scale: [1, 1, 1],
        smoothMotion: 1, //1: 平滑插值，0: 跳跃
        coordinateType: 1, //设置坐标系：0(Projection), 1(WGS84)
      };
      await __g.customObject.add(obj);
      return id;
      // await __g.customObject.updateBegin();
      if (location.length > 1) {
        let i = 0;
        let timer = setInterval(async () => {
          console.log(location[++i], id, i, "test");
          try {
            await __g.customObject.setLocation(id, location[++i].reverse());
          } catch (e) {
            clearInterval(timer);
            this.endNum += 1;
          }

          if (i >= location.length - 1) {
            this.endNum += 1;
            clearInterval(timer);
            // await __g.customObject.updateEnd();
          }
        }, 200);
      }
    },
    // 设置车位置
    async moveCar(item) {
      let { trackId, testPoi } = item;
      testPoi = testPoi.slice(1);
      let TimeOut = (fn, time) =>
        new Promise((resolve, reject) => {
          setTimeout(() => {
            fn();
            resolve();
          }, time);
        });
      if (testPoi.length > 0) {
        // console.time("测试1");
        testPoi.forEach(async (item, index) => {
          await TimeOut(async () => {
            __g.customObject.setLocation(trackId, item);
          }, 250 * index);
        });
        // console.timeEnd("测试1");
      }
    },
    // 删除车
    deleteCar(arr) {
      arr.forEach(async (item) => {
        let { trackId: id } = item;
        await __g.customObject.delete(id);
      });
    },
    // 创建车
    async creatCarAll() {
      __g.camera.set(492996, 2491966, 31.160116, -14.463061, 144.119186);
      this.result.forEach((item, index) => {
        this.creatCar(item, index);
      });
    },
    // 移动车
    moveCarAll() {
      console.time("测试1");
      this.result.forEach((item) => {
        // this.moveCar(item);
        let { trackId, testPoi } = item;
        testPoi = testPoi.slice(1);

        let index = 0;
        let timer = setInterval(async () => {
          if (++index > testPoi.length) {
            this.$message.success("运行结束");
            clearInterval(timer);
          }
          let pos = testPoi[index];
          await __g.customObject.setLocation(trackId, pos);
        }, this.ms);
      });
      console.timeEnd("测试1");
    },
    deleteCarAll() {
      this.endNum = 0;
      console.time("清除");
      // this.btnDis = true;
      this.result.forEach(async (item) => {
        await __g.customObject.delete(item.trackId);
      });

      console.timeEnd("清除");
      // this.btnDis = false;
    },
    test() {
      console.time("测试222");
      this.result.forEach((item, index) => {
        let po = this.computPos(index);
      });
      console.timeEnd("测试222");
    },
    computPos(i) {
      return this.pos.map((item) => {
        return [item[1], (item[0] += 0.00005)];
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  z-index: 999;
  width: 90px;
  height: 50px;
  background-color: pink;
  position: absolute;
  left: 0;
  top: 0;
}

// .test {
//   z-index: 999;
//   width: 90px;
//   height: 50px;
//   background-color: pink;
//   position: absolute;
//   left: 200px;
//   top: 0;
// }

// .send {
//   z-index: 999;
//   width: 90px;
//   height: 50px;
//   background-color: pink;
//   position: absolute;
//   left: 400px;
//   top: 0;
// }
.el-input {
  z-index: 999;
  width: 100px;
  height: 50px;
  position: absolute;

}
.num{
  left: 500px;
  top: 0;
}

.ms{
  left: 700px;
  top: 0;
}
</style>
